<template>
  <div class="topTab flex_center">
    <div class="col flex_center" @click="goHome(1)" :class="{cur: type == 1}">首页</div>
    <div class="col flex_center" @click="goHome(2)" :class="{cur: type == 2}">水电</div>
    <div class="col flex_center" @click="goHome(3)" :class="{cur: type == 3}">报表</div>
  </div>
</template>
  
  <script>
  export default {
    name: 'HomeHead',
    components: {},
    props: {
      type: {
        type: Number,
        default: 1
      },
    },
    data() {
      return {
      }
    },
    watch: {},
    created() {
    },
    methods: {
      goHome(type) {
        this.$router.push({ path: type == 1 ? '/' : type == 2 ? '/water' : '/chart' });
      },
    }
  }
  </script>
  
  <style scoped>
.topTab{
  padding:3vw 0;
  .col{
    width:26.8vw;
    height:8vw;
    background: url(../assets/checkBg.png) no-repeat center center;
    background-size:100% auto; 
    color:#fff;
    font-size:16px;
    margin:0 3vw;
  }
  .cur{
    background: url(../assets/checkedBg.png) no-repeat center center;
    background-size:100% auto; 
  }
}
  </style>
  